<template>
    <view class="adviserCom" :class="isRank?'shadowSty':''">
        <view class="rankNoBox col-fff fontBold" :class="{'bg-error': rankIndex==0, 'bg-theme':rankIndex==1, 'bg-FFCE00':rankIndex==2, 'bg-bf7c03':rankIndex>2}" v-if="isRank">{{rankIndex+1}}</view>
        <view class="adviserItem flex">
        	<view class="userInfo flex" @click="adviserDetail">
        	    <image class="userImg" :src="detail.avatar_url"></image>
                <view class="userNameMsg left-10">
                    <view class="userName font14 fontBold">
                        {{detail.name}}
                        <!-- <text class="medalIcon bg left-5" :class="'medal'+rankIndex" v-if="rankIndex<3"></text> -->
                        <!-- <text class="cardIcon bg left-5"></text> -->
                    </view>
                    <view class="houseName top-10 col-grey txtHidden font11">{{productTit?productTit:detail.product_title}}</view>
                </view>
        	</view>
            <view class="contactType flex col-theme">
                <button class="iconBox flex" @click="callBtn">
                    <u-icon name="phone-fill" color="#007235" size="15"></u-icon>
                    <text class="left-3 font12">电话</text>
                </button>
                <!-- <button class="iconBox flex">
                    <u-icon name="chat-fill" color="#007235" size="15"></u-icon>
                    <text class="left-3 font12">咨询</text>
                </button> -->
            </view>
        </view>
        <view class="rankDesc bg-fff col-bf7c03 font12" v-if="isRank">
            专业服务；全面解答
        </view>
    </view>
</template>

<script>
    import { mapState } from 'pinia';
    import { useConfigStore, useUserInfoStore, useIndexStore } from '@/store/index';
    import { checkLogin, checkUserInfo } from '@/common/common';
    // import { userCallAdviser } from '@/common/api-adviser';
	export default {
        data() {
            return {
            }
        },
		props:{
            detail: {
                type: Object,
                default: () => ({})
            },
            productId: {
                type: [String, Number],
                default: ''
            },
            extendProdId: {
                type: Number,
                default: null
            },
            productTit: {
                type: String,
                default: ''
            },
            rankIndex: {
                type: Number,
                default: 0
            },
            isRank: {
                type: Boolean,
                default: false
            }
		},
        computed:{
        	...mapState(useUserInfoStore, ['userInfo']),
        	...mapState(useConfigStore, ['puid']),
            ...mapState(useIndexStore, ['nowCityCode'])
        },
		methods:{
            adviserDetail(){
                // uni.navigateTo({
                //     url: `/pages/houses/adviser/detail?adviserId=${this.detail.id}&productId=${this.productId}&puid=${this.puid}`
                // })
            },
            
            //拨打电话
			callBtn(){
                if(!checkLogin()) {
                    uni.navigateTo({
                        url: `/pages/login/login?adviserId=${this.detail.id}&productId=${this.productId}`
                    })
                    return
                }
                
                uni.makePhoneCall({
                    phoneNumber: that.detail.phone,
                    success() {
                        // userCallAdviser({
                        //     type: 0,
                        //     id: that.detail.id,
                        //     pid: that.productId,
                        //     ext_pid: that.extendProdId
                        // }).then(res => {
                        // })
                    }
                })
            }
		}
	}
</script>

<style scoped lang="scss">
    .medal0{
        background-image: url("https://image.srea.org.cn/xcx/icon/icon-medal-gold.png");
    }
    .medal1{
        background-image: url("https://image.srea.org.cn/xcx/icon/icon-medal-silver.png");
    }
    .medal2{
        background-image: url("https://image.srea.org.cn/xcx/icon/icon-medal-bronze.png");
    }
    .shadowSty{
        box-shadow: 0 4rpx 18rpx rgba(0,114,53, .12);
    }
    .adviserCom{
        line-height: 1;
        position: relative;
        border-radius: 20rpx;
        overflow: hidden;
        .rankNoBox{
            position: absolute;
            top: 0;
            left: 0;
            z-index: 10;
            padding: 4rpx 12rpx;
            border-top-left-radius: 20rpx;
            border-bottom-right-radius: 20rpx;
        }
        .rankDesc{
            height: 60rpx;
            line-height: 60rpx;
            padding-left: 24rpx;
        }
    }
    .adviserItem{
        padding: 10rpx 4rpx;
        justify-content: space-between;
        // background-image: linear-gradient(rgba(255,249,227,.5) 60%, rgba(255,255,255,1));
        .userInfo{
            width: 55%;
            height: 106rpx;
            justify-content: flex-start;
            .userImg{
                width: 84rpx;
                height: 84rpx;
                border: 1rpx solid rgba(0,0,0,.2);
                border-radius: 50%;
            }
            .userNameMsg{
                max-width: calc(100% - 140rpx);
                .userName{
                    .medalIcon{
                        width: 25rpx;
                        height: 26rpx;
                        display: inline-block;
                        vertical-align: middle;
                        background-size: 100% 100%;
                    }
                    .cardIcon{
                        width: 35rpx;
                        height: 26rpx;
                        display: inline-block;
                        vertical-align: middle;
                        background-size: 100% 100%;
                        background-image: url("https://image.srea.org.cn/xcx/icon/icon-adviser-card.png");
                    }
                }
            }
        }
        
        .contactType{
            width: 45%;
            justify-content: flex-end;
            .iconBox{
                line-height: 1;
                margin: 0;
                padding: 8rpx 20rpx;
                border-radius: 40rpx;
                background-size: 100% 100%;
                box-shadow: rgba(0,114,53, .51) 0 2rpx 8rpx 0rpx;
                &::after {
                    border: none;
                    padding: 0;
                    margin: 0;
                }
            }
        }
    }
</style>
